import React, {PureComponent} from "react"
import "./index.less"
import { AlipayOutlined, WechatOutlined } from '@ant-design/icons';
import { Button, Modal, Radio, Spin } from "antd";
import {defaultSize} from "../../../../../shared/project-config"
import {withRouter} from "react-router"
import "animate.css"
import orderCompose from "./compose"
import OrderInfo from "./order-info"
import cs from "classnames"
import AppModal from "libs/app-modal"

//订单确认页(状态un_pay ---> paying)

export default @withRouter
@orderCompose class OrderSubmitted extends PureComponent {
  render() {

    const {
      data,
      toBack,
      toCancelOrder,
      onNeedPrintChange,
      countDown,
      toDownload,
      onChangePrint,
      needPrint,
      fileReadOnly,
      onFileCheck,
      payLoading,
      onSelectReceiver,
      submitPayTypeVisible,
      $submitPayTypeVisible,
      onPayTypeSelect,
      toPay
    } = this.props

    const orderProps = {
      data,
      countDown,
      toDownload,
      onChangePrint,
      needPrint,
      fileReadOnly,
      onFileCheck,
      onSelectReceiver
    }

    return (
      <div className={'order-panel'}>

        <OrderInfo headerText={'订单支付'}
                   data={data}
                   {...orderProps}
                   onNeedPrintChange={onNeedPrintChange}
                   fileReadOnly={true}/>

        <AppModal visible={submitPayTypeVisible}
                  onOk={toPay}
                  onCancel={() => $submitPayTypeVisible(false)}>
          <h2 className={'pay-type-chooser'}>选择支付方式</h2>
          <Radio.Group className={cs('pay-type-radio')}
                       buttonStyle="solid"
                       onChange={onPayTypeSelect}>
            <Radio className={'wx'} value="WX">
              <div>
                <WechatOutlined />
                <div>微 信</div>
              </div>
            </Radio>
            <Radio className={'ali'} value="ALI">
              <div>
                <AlipayOutlined />
                <div>支付宝</div>
              </div>
            </Radio>
          </Radio.Group>
        </AppModal>

        <AppModal visible={payLoading} closable={false} footer={false}>
          <div>
            <Spin/> 正在生成支付信息,请稍候....
          </div>
        </AppModal>

        <div className={'order-buttons'}>

          <Button size={defaultSize} onClick={toBack}>
            返回
          </Button>

          <Button size={defaultSize} className={'red'} disabled={!countDown}
                  onClick={toCancelOrder}>
            取消
          </Button>

          <Button size={defaultSize} type={'primary'} disabled={!countDown}
                  onClick={() => $submitPayTypeVisible(true)}>
            立即支付
          </Button>
        </div>
      </div>
    );
  }

}
